<template>
    <div class="ui-toast"
        :class="{show:lock}">
        {{msg}}
    </div>
</template>
<script>
    import Vue from 'vue';

    let toast = {
        msg:'',
        lock:false
    };

     Object.defineProperties(Vue.prototype, {
        $toast:{
            get (){
                return {
                    /**
                     * 显示toast消息
                     * @param  {String} msg      消息内容
                     * @param  {Function} callback  消息显示完成回调
                     * @param  {Number} interval 间隔
                     */
                    show (msg,callback,interval=1600){
                        if(toast.lock){
                            return ;
                        }
                        toast.lock = true;
                        toast.msg = msg;

                        setTimeout(()=>{
                            toast.lock = false;
                            callback && callback();
                        },interval)
                    }
                }
            }
        }
     })

    export default {
        props:[
            'show',
            'transitionName'
        ],
        data (){
            return toast
        }
    }
</script>
<style lang="sass">
    @import "../sass/_kit/variables.scss";
    .ui-toast{
        position: fixed;
        z-index: 9999;
        top: 50%;
        left:50%;
        color:#fff;
        text-align: center;
        border-radius: $rem*4;
        padding:$rem*6 $rem*12;
        font-size:$rem*28;
        background-color: rgba(0, 0, 0, 0.58);
        transition: opacity 0.25s ease-in-out;
        transform:translate(-50%,-50%);
        word-break: break-all;
        opacity:0;
        &.show{
            opacity:1;
        }
    }
</style>
